<template>
  <div class="confirm-container">
    <el-dialog :before-close="close" :visible.sync="dialogVisible" top="0vh" custom-class="center-dialog">
      <div class="confirm-content">
        <p class="confirm-content-text">
          <a class="tit-icon">ǃ</a>
          <span>{{ content.message }}</span>
          <span>{{ content.name }}</span>
          <span v-if="content.hideTit">提示：{{ content.prompt || promptDefCont }}</span>
        </p>
        <div class="foot" slot="footer">
          <el-button type="primary" plain @click.stop="close">
            <span>{{ (content.btn && content.btn.no) || '取消' }}</span>
          </el-button>
          <el-button type="primary" @click.stop="ok">
            <span>{{ (content.btn && content.btn.ok) || '确认' }}</span>
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        content: {
          type: '提示',
          message: '',
          name: '',
          prompt: '',
          hideTit: false,
          btn: {
            ok: '确认',
            no: '取消'
          },
        },
        dialogVisible: true,
        promptDefCont: '删除后将不可恢复。'
      }
    },
    methods: {
      close() {
        console.log('关闭');
      },
      ok() {
        console.log('确定')
      }
    }
  }
</script>
<style lang="less">
  .center-dialog {
    top: 50%;
    transform: translateY(-50%);
    width: 500px !important;
  }
</style>
<style lang="less" scoped>
  .msgContent {
    text-align: center;
  }

  .foot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }

  .tit-icon {
    font-size: 20px;
    position: absolute;
    left: 45px;
    top: 42px;
    color: #fff;
    background: orange;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }

  .confirm-content-text {
    margin-top: -20px;
    padding-left: 70px;
    line-height: 40px;
    font-size: 16px;
    span:nth-child(2) {
      display: block;
      width: 300px;
      font-weight: bolder;
    }
    span:nth-child(3) {
      display: block;
      width: 300px;
    }
    span:nth-child(4) {
      display: block;
      width: 300px;
      color: grey;
      opacity: 0.6;
    }
  } 
  .foot {
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
  }
</style>